<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>生命周期</title>
    <script src="../res/vue.js"></script>
    <link rel="stylesheet" href="app.css"></link>
</head>
<body >
<div id="app-1">
    <!--
        1、如果data.message有值得话，vue会将该值也渲染到页面中
        2、所有的v-model内容都应该在vue.data中进行定义
        3、使用数组表示时，不是使用的boolean true或者false来表示选中，数组只要与value值一致，那么就会
            被显示出来
    -->
    <article >
        1、如果data.message有值，vue会将该值也渲染到页面中<br/>
        2、所有的v-model内容都应该在vue.data中进行定义<br/>
        3、使用数组表示时，不是使用的boolean true或者false来表示选中，数组只要与value值一致，那么就会<br/>
        被显示出来
    </article>

    <input v-model="message" placeholder="编辑">
    <p>Message is {{message}}</p>


    <span>Multiline message is :</span>
    <p style="white-space: pre">{{message}}</p>
    <br>
    <textarea name="" v-model="message" id="" cols="30" rows="10"></textarea>

    <br/>
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{checked}}</label>

    <h4>多选</h4>
    <hr/>
    <input type="checkbox" id="jack" value="jack"  v-model="checkedNames">
    <label for="jack">jack</label><br/>
    <input type="checkbox" id="john" value="john1" v-model="checkedNames">
    <label for="checkbox">john</label><br/>
    <input type="checkbox" id="mike" value="mike" v-model="checkedNames">
    <label for="checkbox">mike</label><br/>

    <h4>单选</h4>
    <hr/>

    <article >
        关于单选，将v-model定义为相同的对象，且该对象不能是数组；即可<br/>
    </article>

    <div id="example-4" class="demo">
        <input type="radio" id="1id" value="one" v-model="picked">
        <label for="1id">one</label>
        <input type="radio" id="2id" value="two" v-model="picked">
        <label for="2id">two</label>
        <span>picked {{picked}}</span>
    </div>

    <h4>选择列表</h4>
    <hr/>
    <div id="example-5" class="demo">
        <select name="" v-model="selected">

            <option value="1">A</option>
            <option value="2">B</option>
            <option value="3">C</option>
        </select>
        <span>selected:{{selected}}</span>
    </div>

    <article>
        1、使用for循环绑定的forSelected获得的是option中的value内容<br/>
        2、注意定义在select中的forSelected对象，该对象获得的是value值<br/>
        3、如果想获得定义在option中的key和value值，需要在v-bind:value中定义为for的item元素，即option譬如下面的代码<br/>
    </article>
    <select  v-model="forSelected" v-model="text">
        <option  v-for="option in options" v-bind:value="option" >
            {{option.text}}
        </option>
    </select>
    <span>selected111:{{forSelected.text}}</span>

    <!-- 当选中时，`picked` 为字符串 "a" -->
    <input type="radio" v-model="picked" value="a">
    <!-- `toggle` 为 true 或 false -->
    <input type="checkbox" v-model="toggle">
    <!-- 当选中时，`selected` 为字符串 "abc" -->
    <select v-model="selected">
        <option value="abc">ABC</option>
    </select>

    <article>
        1、使用for循环绑定的forSelected获得的是option中的value内容<br/>
        2、注意定义在select中的forSelected对象，该对象获得的是value值;<br/>
        3、v-bind:true-value表示绑定为true的时候，显示data中定义的a值<br/>
    </article>

    <input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b">
    <span>{{toggle}}</span>


    <h4>lazy</h4>
    <hr/>
    <article>
        1、如果在input使用该参数，只有当光标已开数据库的时候，才会触发数据的更新；<br/>
        2、被.number修饰的内容，用户输入的值会自动转为数字<br/>
        3、.trim会自动去掉首尾空格;<br/>
        4、.trim .number是可以在一个语句中重复使用的
    </article>
    <input type="text" v-model.lazy="msg" placeholder="请输入任何值">
    <span>{{msg}}</span>
    <br/>
    <input type="number" v-model.number="age" placeholder="请输入年龄">
    <span>{{age}}</span>
    <br/>
    <input type="text" v-model.trim.lazy="msg" placeholder="请输入任何值">
    <span>a{{msg}}b</span>
    <br/>
</div>
<script>
    var app = new Vue({
        el:'#app-1',
        data:{
            message:'123',
            checked:false,
            checkedNames:['john'],
            picked:'',
            selected:'A',
            forSelected:'A',
            toggle:false,
            a:'AAA',
            b:'BBB',
            msg:'',
            age:'',
            options:[{
                value:'1',
                text:'A'
            },{
                value:'2',
                text:'B'
            },{
                value:'3',
                text:'C'
            }]
        }
    })
</script>
</body>
</html>